<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="utf-8"/>
  <meta content="VisuAlgo 于2011年由Steven Halim博士构想出来，作为一个工具，帮助他的学生更好地理解数据结构和算法，让他们能够自学基础知识并按照自己的节奏进行。他与新加坡国立大学的学生一起开发并整合了一系列的可视化，从简单的排序算法到复杂的图形数据结构。虽然这些设计主要是为了新加坡国立大学的学生使用，他们正在学习各种数据结构和算法课程（CS1010/等价课程，CS2040/等价课程，CS3230，CS3233和CS4234），但作为在线学习的倡导者，我们希望全世界充满好奇心的人也会发现这些可视化同样有用。" name="description"/>
  <meta content="VisuAlgo数据结构算法可视化动画在线学习教程讲座" name="keywords"/>
  <meta content="4sWzwdlSsYSnOFXr1z9X1S5VqUh3C6SshQOybgd7" name="csrf-token"/>
  <meta content="IE=EDGE" http-equiv="X-UA-Compatible"/>
  <meta content="https://visualgo.net/img/png.png" property="og:image"/>
  <title>
   通过动画可视化数据结构和算法&lt;br&gt; - VisuAlgo
  </title>
  <link href="https://visualgo.net/img/favicon.png" rel="icon" type="image/x-icon"/>
  <link href="https://visualgo.net/img/favicon.png" rel="shortcut icon" type="image/x-icon"/>
  <link href="https://visualgo.net/img/favicon.png" rel="apple-touch-icon"/>
  <link href="https://visualgo.net/img/favicon.png" rel="apple-touch-icon" sizes="72x72"/>
  <link href="https://visualgo.net/img/favicon.png" rel="apple-touch-icon" sizes="114x114"/>
  <link href="https://visualgo.net/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="https://visualgo.net/fonts/silkscreen/stylesheet.css" rel="stylesheet" type="text/css"/>
  <link href="https://visualgo.net/css/common-1.0.2.css" rel="stylesheet" type="text/css"/>
  <style>
   /* @charset  "utf-8"; // dropped on 4 Jan 2022, see if it causes issue */

h1 {
  text-align: center;
  font-family: 'SilkscreenNormal';
  font-size: 36px;
  margin-top: 50px;
}

h2 {
  text-align: center;
  font-style: italic;
  margin-bottom: 30px;
  font-size: 15px;
}

#searchbar { text-align: center; }
#search {
  width: 250px;
  padding: 7px 10px;
  box-shadow: 0px 0px 3px #929292 inset;
  background: white;
  color: #888888;
  font-size: 14px;
}

#show-filters {
  cursor: pointer;
  color: white;
  padding: 7px 11px 6px;
  margin-left: -1px;
  display: inline-block;
}
#show-filters img { display: inline-block; vertical-align: 2px; }

#active-tags { text-align: center; margin-left: -10px; }
.active-tag {
  display: inline-block;
  position: relative;
  background: #aaaaaa;
  color: white;
  padding: 4px 34px 4px 8px;
  margin-top: 20px;
  margin-left: 10px;
  font-size: 14px;
}
.active-tag span { /*the cross*/
  background: #444444;
  display: inline-block;
  padding: 3px;
  position: absolute;
  top: 0px;
  right: 0px;
  cursor: pointer;
}
.rotateRight {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Safari and Chrome */
  -o-transform: rotate(180deg); /* Opera */
  -moz-transform: rotate(180deg); /* Firefox */

  /* if you want to do this move with animate use transition */
  transition: .5s;
  -moz-transition: .5s; /* Firefox 4 */
  -webkit-transition: .5s; /* Safari and Chrome */
  -o-transition: .5s; /* Opera */
}

.line { height: 1px; background: #cccccc; margin: 0px 30px;}
#emptySearchMsg { text-align: center; font-size: 15px; margin-top: 20px; }
#filters { padding: 20px 60px 12px 22px; overflow: auto; }
  .filter {
    color: white;
    padding: 3px 8px;
    margin: 0px 0px 8px 8px;
    cursor: pointer;
    border-radius: 2px;
    float: left;
  }

ul, li {
  padding: 0px;
  margin: 0px;
}

.list { width: 100%; clear: both;}
.list li {
  display: block;
  float: left;
  width: 100%;
}
.list li .li-wrapper {
  background: white;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin-left: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 0px 3px #dddddd;
}
.list li .li-wrapper:hover {
  box-shadow: 0px 0px 3px #aaaaaa;
}
.list li a.thumbnail {
  display: block;
  position: relative;
  margin: 0px 0px 10px 10px;
  cursor: pointer;
}
.list li a.thumbnail .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  text-align: center;
}
.list li a.thumbnail img { width: 100%; }
.list li a.thumbnail img.static { width: 100%; position: absolute; top: 0px; }
.list li a.thumbnail div { width: 100%; }
.list li a.thumbnail div.static { width: 100%; position: absolute; top: 0px; }

.list li .info { margin: 0px 0px 0px 10px; }
.list li .info h3 {
  font-size: 13px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 8px;
}
.list li .info h3:hover { color: #999999; }
.list li .info .indv-viz-filters { margin-left: -8px; height: 23px; float: none; overflow: hidden; }

#noexist {
  display: block;
  font-size: 18px;
  font-weight: bold;
  padding: 20px;
}

#topleft {
  border: 1px solid grey;
  border-radius: 5px;
  margin: 10px;
  padding: 2px;
  max-height: 200px;
}

#topright {
  position: absolute;
  top: 60px;
  left: 1000px;
  width: 90px;
  height: 175px;
  display: none;
}

#modeselect {
  position: sticky;
  margin-top: 30px;
  height: 25px;
  width: 175px;
}

#modeselectbutton {
  height: 25px;
}
/*
.electure-print {
  float: right;
} */

@media (min-width: 320px) { /* 320-540px */
  #topleft {
    top: 20px;
    /* width: 100%-; /* the - is to take into account the potential vertical scroll bar?, commented on 4 Jan 2022 as it is a CSS error... */
    position: relative;
  }
}

@media (min-width: 540px) { /* 540-768px */
  h1 { font-size: 50px; }
  .line { margin: 0px 50px; }
  #filters { padding: 20px 60px 12px 42px; }
  .list li { width: 50%; }
}

@media (min-width: 768px) { /* 768-1024px */
  .line { margin: 0px 60px; }
  #filters { padding: 20px 60px 12px 52px; }
  .list li { width: 33.33%; }
}

@media (min-width: 1024px) { /* more than 1024px */
  .list li { width: 25%; }
  #topleft {
    top: 40px;
    width: 25%;
    position: absolute;
  }
}

@media (min-width: 1400px) { /* more than 1400px */
  .list li { width: 20%; }
}

.static {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  height: 100%;
  width: 300px;
  opacity: 1;
  backface-visibility: hidden;
}

/*.container {
  position: relative;
  width: 50%;
}
*/
/*.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
*/

.node {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 2px;
}

.link {
  stroke: #777;
  stroke-width: 2px;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.li-wrapper:hover .static {
  opacity: 0.3;
}

.li-wrapper:hover .middle {
  opacity: 1;
}

.message {
  font-size: 150%;
  text-align: center;
}

#main h2 {
  font-weight: bold;
  font-size: large;
  font-style: normal;
}

#pathway-wrapper {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 120%;
  vertical-align: top;
  overflow: hidden;
}

#learning-pathway-svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

#change-lang-popup {
  position: fixed;
  background: green;
  left: 40px;
  top: 50px;
  width: 250px;
  height: 100px;
  border: transparent;
  border-radius: 10px;
  padding: 10px 20px;
}

#change-lang-popup p {
  font-size: medium;
  color: white;
  line-height: 2;
  font-family: "PT Sans", sans-serif;
}

#change-lang-popup-btn {
  text-decoration: underline;
  margin-left: 50px;
}
#change-lang-popup-btn:hover {
  cursor: pointer;
}
  </style>
  <link href="https://visualgo.net" hreflang="en" rel="alternate"/>
  <link href="https://visualgo.net/zh" hreflang="zh" rel="alternate"/>
  <link href="https://visualgo.net/es" hreflang="es" rel="alternate"/>
  <link href="https://visualgo.net/pt" hreflang="pt" rel="alternate"/>
  <link href="https://visualgo.net/ru" hreflang="ru" rel="alternate"/>
  <link href="https://visualgo.net/id" hreflang="id" rel="alternate"/>
  <link href="https://visualgo.net/de" hreflang="de" rel="alternate"/>
  <link href="https://visualgo.net/bn" hreflang="bn" rel="alternate"/>
  <link href="https://visualgo.net/ja" hreflang="ja" rel="alternate"/>
  <link href="https://visualgo.net/ko" hreflang="ko" rel="alternate"/>
  <link href="https://visualgo.net/vi" hreflang="vi" rel="alternate"/>
  <style>
   /* copied here from common.css (perhaps need to use version numbering) until caches worldwide settles */
#reload-mobile-popup, #message-popup { /* #gdpr-popup, */
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  min-width: 320px;
  bottom: 62px;
  height: 300px;
  background-color: #0275d8;
  border-radius: 15px;
  padding: 30px 40px;
  z-index: 9500;
}
#reload-mobile-popup {
  background-color: green;
  height: 200px;
}
#message-popup {
  z-index: 9000;
  width: 40%;
  height: 130px;
  background-color: #d9534f;
}

#reload-mobile-popup p, #message-popup p { /* #gdpr-popup p, */
  font-size: large;
  color: white;
  line-height: 2;
  font-family: "PT Sans", sans-serif;
}

#reload-mobile-popup .inner-button, #message-popup .inner-button { /* #gdpr-popup .gdpr-button, */
  border: white solid 2px;
  border-radius: 4px;
  font-weight: bold;
  font-size: x-large;
  padding: 2px 8px;
  color: white;
  width: 90px;
  text-align: center;
  position: absolute;
  letter-spacing: 1px;
  text-decoration: none;
  cursor: pointer;
}

#gdpr-accept, #reload-mobile-button, #dismiss-message-btn {
  bottom: 30px;
  right: 40px;
}

#gdpr-reject, #cancel-reload-mobile-button {
  bottom: 30px;
  right: 170px;
}
  </style>
 </head>
 <body>
  <div id="body-container" style="display: flex; flex-direction: column; min-height: 100vh;">
   <style>
    #topbar {
    background-color: rgb(0,0,0);
    font-family: "PT Sans", sans-serif;
    font-size: 13px;
    height: 40px;

    padding-left: 40px;
    padding-right: 40px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    justify-content: flex-start;
  }

  #topbar a:hover {
    text-decoration: none;
  }

  #account-dropdown-btn {
    color: #198754;
    font-size: 1rem;
    padding: 0 0.5rem;
    margin-left: 0.5rem;

    border: 2px solid;
    border-radius: 0.25rem;
    height: 24px;
    line-height: 1.5;
  }

  #account-dropdown-btn:hover {
    color: #0a58ca!important;
    border-color: #198754;
    text-decoration: none;
  }

  #login-button {
    color: #198754;
    font-size: 1rem;
    padding: 0 0.5rem;
    margin-left: 0.5rem;

    border: 2px solid;
    border-radius: 0.25rem;

    height: 24px;
    line-height: 1.5;
  }

  #login-button a:hover {
    color: #0a58ca!important;
    text-decoration: none;
  }

  #account-dropdown-menu {
    display: none;
    position: absolute;
    background-color: white;
    z-index: 1000;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 1rem;
    color: rgb(0,0,0);
    text-align: left;
    list-style: none;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.25rem;
    top: 45px;
    right: 40px;
    line-height: 1.5;
  }

  .account-dropdown-item {
    display: block;
    width: auto;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: rgb(0,0,0);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    height: 24px;
    font-family: SilkscreenNormal, sans-serif;
  }

  .account-dropdown-item:hover {
    background-color: #e9ecef;
    color: #0a58ca;
    text-decoration: none;
  }
   </style>
   <nav id="topbar">
    <span style="margin-right: 0.25rem">
     <a href="https://www.comp.nus.edu.sg/~stevenha" style="text-decoration: none; color: white">
      <span class="colour" style="border: 1px solid; border-color: #198754!important; border-radius: .25rem!important">
       7
      </span>
     </a>
     <a href="https://visualgo.net" style="font-family: SilkscreenNormal,sans-serif; font-size: 20px; margin-left: 4px;">
      <span style="color: white">
       Visu
      </span>
      <span class="colour">
       Algo
      </span>
      <span style="font-size: 40%; color: white">
       .net
      </span>
     </a>
     <span style="color: white">
      /
     </span>
     <select class="select2-dropdown" id="Language" onchange="changeURL()">
      <option value="en">
       en
      </option>
      <option selected="" value="zh">
       zh
      </option>
      <option value="id">
       id
      </option>
     </select>
    </span>
    <span style="max-height: 30px">
    </span>
    <span style="max-height: 30px; background-color:rgb(0,0,0)!important; color: white; margin-left: auto">
    </span>
    <span id="login-button" style="font-family: SilkscreenNormal,sans-serif">
     <a href="https://visualgo.net/login">
      Login
     </a>
    </span>
   </nav>
   <ul id="account-dropdown-menu">
    <li>
     <a class="account-dropdown-item" href="https://visualgo.net/profile">
      Profile
     </a>
    </li>
    <li>
     <a class="account-dropdown-item" href="https://visualgo.net/training">
      Training
     </a>
    </li>
    <li>
     <a class="account-dropdown-item" href="https://visualgo.net/tests">
      Tests
     </a>
    </li>
    <li>
     <a class="account-dropdown-item" href="https://visualgo.net/logout">
      Log Out
     </a>
    </li>
   </ul>
   <script>
    function changeURL() {
    let URL = window.location.href.split('/');
    URL[3] = document.getElementById("Language").value;
    window.location.assign(URL.join('/'));
  }

  function changeDefaultLanguageAndURL() {
    let URL = window.location.href.split('/');
    let val = document.getElementById("Language").value;
    URL[3] = val;

    let data = {
      '_token': "4sWzwdlSsYSnOFXr1z9X1S5VqUh3C6SshQOybgd7",
      'lang'  : val
    }
    $.post('https://visualgo.net/changeLanguage', data, function (res, status) {
      if(res['status'] === 'success') {
        window.location.assign(URL.join('/'));
      } else if (res['status'] === 'failed') {
        alert(res['message']);
      } else {
        alert('An unknown error occurred');
      }
    })
  }
   </script>
   <div id="dark-overlay">
   </div>
   <div id="main-content-container" style="flex: 1">
    <h1>
     Visu
     <span class="colour">
      Algo
     </span>
     <span style="font-size:25%">
      .net/zh
     </span>
    </h1>
    <h2 id="subtitle">
     通过动画可视化数据结构和算法
     <br/>
    </h2>
    <form id="searchbar">
     <input autocomplete="off" id="search" placeholder="搜索..." type="text"/>
     <div id="show-filters" title="show/hide filters">
      ▿
     </div>
    </form>
    <br/>
    <center>
     <a href="https://www.comp.nus.edu.sg" target="_blank">
      <img alt="NUS Computing" src="https://visualgo.net/img/nuscomputing.webp" width="200"/>
     </a>
     <p style="text-align: center;">
      <a href="https://www.comp.nus.edu.sg/features/2020stevenhalim/" target="_blank">
       <u>
        Featured story: Visualizing Algorithms with a Click
       </u>
      </a>
     </p>
    </center>
    <br/>
    <center>
     <a href="https://optiver.com/" target="_blank">
      <img alt="Optiver" src="img/Optiver-Black_RGB.png" width="200"/>
     </a>
     <p style="text-align: center;">
      <a href="https://optiver.com/" target="_blank">
       <u>
        VisuAlgo project is funded by Optiver for 2023-2024. We now open VisuAlgo account registration to every Computer Science students/teachers worldwide and have started various upgrading (sub)-projects.
       </u>
      </a>
     </p>
    </center>
    <div id="active-tags">
    </div>
    <div id="emptySearchMsg" style="display: none;">
     找不到答案&gt;
    </div>
    <div id="filters-and-lines" style="display: none;">
     <div class="line" style="margin-top: 20px;">
     </div>
     <div id="filters">
     </div>
     <div class="line">
     </div>
    </div>
    <div id="topleft">
     <p style="margin-bottom: 8px;">
      <b>
       你知道吗？
      </b>
      <a class="links" onclick="nextTip()">
       下一个随机提示
      </a>
     </p>
     <p id="msg" style="text-align: justify;">
     </p>
    </div>
    <div id="topright">
     <a href="https://cpbook.net" target="_blank">
      <img alt="CPbook" src="https://visualgo.net/img/cp4.png" style="height: 120px;"/>
     </a>
     <br/>
     <a href="https://www.lulu.com/spotlight/stevenhalimatgmaildotcom" style="margin-left: 45px;" target="_blank">
      <img alt="lulu" src="https://visualgo.net/img/blue.png"/>
     </a>
    </div>
    <p hidden="" id="msg_list0">
     VisuAlgo是一个三语言网站。尝试访问除默认的
     <a href="./en">
      <u>
       英文版
      </u>
     </a>
     之外的其他VisuAlgo版本，例如
     <a href="./zh">
      <u>
       中文版
      </u>
     </a>
     或
     <a href="./id">
      <u>
       印尼版
      </u>
     </a>
     。用户可以查看这三个页面的
     <a href="./statistics">
      <u>
       翻译统计
      </u>
     </a>
     。我们的目标是使这三个页面的翻译率接近100%。不幸的是，其他语言的翻译进度远远落后，因此它们被重定向到英文版。
    </p>
    <p hidden="" id="msg_list1">
     在VisuAlgo中，您可以使用自己的输入进行任何算法，而不只是样本输入。 这是VisuAlgo的一大特性。在这6个图形相关的可视化中尝试图形绘制功能：图形DS，DFS / BFS，MST，SSSP，最大流量和匹配。 您也可以在这6个图表相关的可视化对象框中点击标签'graph'，或在搜索框中输入'graph'
     <br/>
    </p>
    <p hidden="" id="msg_list2">
     这里是一些新的可视化功能：能够显示两个可视化比例（1.0x和0.5x），缩小比例用于显示稍大的测试用例的操作，
     <a href="./en/list">
      <u>
       /list
      </u>
     </a>
     （大多数情况下，链表不再自动重新布局，以加强几乎所有链表操作的O(1)印象）。
    </p>
    <p hidden="" id="msg_list3">
     重大新闻 [Fri, 09 Jun 23]: VisuAlgo 项目从今天开始由
     <a href="https://optiver.com" target="_blank">
      <u>
       Optiver
      </u>
     </a>
     赞助。我们现在向全球的计算机科学学生/教师开放 VisuAlgo 账户注册。请访问
     <a href="https://visualgo.net/login">
      <u>
       登录页面
      </u>
     </a>
     并按照屏幕上的指示创建一个新的 VisuAlgo 账户（不再限制于 'nus.edu' 相关的电子邮件）。
    </p>
    <p hidden="" id="msg_list4">
     为了比较2个相关算法， 例如在同一个图表上跑Kruskal和Prim，或在同一种数据结构上进行两个相关的操作（如最大堆作为二叉树和紧凑数组的不同格式），打开2 个VisuAlgo窗口，并列他们。 点击这里查看截图。
     <br/>
    </p>
    <p hidden="" id="msg_list5">
     您可以可视化用JavaScript编写的任何有效
     <u>
      递归函数
     </u>
     的递归树（或DAG，如果存在重叠的子问题和动态规划（DP））。 点击这里查看截图。
     <span class="Y2IQFc" lang="zh-CN">
      显然，不要尝试使用巨大的递归树来可视化递归，因为这样做会使您自己的 Web 浏览器/计算机崩溃。
     </span>
    </p>
    <p hidden="" id="msg_list6">
     VisuAlgo第一次加载很快（我们用了CloudFlare的全球CDN），但第二次加载会更快，因为我们缓存了大量的静态内容 :)（所以请不要使用隐身浏览模式或隐私浏览模式，以让缓存发挥作用）。对于NUS的学生，在登陆后VisuAlgo将会根据你的偏好/课程设定加载。
     <br/>
    </p>
    <p hidden="" id="msg_list7">
     每个可视化页面都有一个“电子讲座模式”，可以从页面右上角访问。该模式会自动显示给首次访问（或未登录）的访问者，以展示正在可视化的数据结构或算法。许多可视化页面的电子讲座模式已经达到了新加坡国立大学算法课程的讲座标准 :)。
    </p>
    <p hidden="" id="msg_list8">
     请查看 VisuAlgo 的最新功能：1). 针对新加坡国立大学的学生和全球认证的计算机科学讲师的用户账户系统（并阅读右下角的最新隐私政策弹窗），2). 更加适合移动设备的设置，3). 更加完善的电子讲义，达到 "新加坡国立大学标准"，以及 4). 三语能力（/en，/zh，或 /id）。
    </p>
    <p hidden="" id="msg_list9">
     VisuAlgo主要有两个部分：24个可视化页面及其相关的在线测验组件（我们正在向题库中添加更多的问题）。我们不会在在线测验中编写任何问题:O，所有的答案都将几乎立即被评分:)。您可以通过点击可视化模块上的 '培训' 按钮来使用这个在线测验系统。
    </p>
    <center>
     <form action="https://visualgo.net/editTemporaryView" class="form-select" id="temp_view_form" method="POST" style="display: none;">
      <input name="_token" type="hidden" value="4sWzwdlSsYSnOFXr1z9X1S5VqUh3C6SshQOybgd7"/>
      <text>
       Preferred layout:
      </text>
      <select id="modeselect" name="temp_view">
       <option selected="selected" value="default">
        Default View
       </option>
       <option value="CS1010 or equivalent">
        CS1010 or equivalent
       </option>
       <option value="IT5003">
        IT5003
       </option>
       <option value="CS2040 or equivalent">
        CS2040 or equivalent
       </option>
       <option value="CS3230">
        CS3230
       </option>
       <option value="CS3233">
        CS3233
       </option>
       <option value="CS4234">
        CS4234
       </option>
      </select>
     </form>
    </center>
    <div id="main">
     <ul class="list">
      <li class="viz" id="array">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="array" href="https://visualgo.net/zh/array">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/array.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/array" id="arraytext">
           Array
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/array/print" target="_blank">
            ✍
           </a>
          </div>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           cs1010
          </span>
          <span class="filter">
           it5003
          </span>
          <span class="filter">
           cs2040
          </span>
          <span class="filter">
           cs3230
          </span>
          <span class="filter">
           cs3233
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="sorting">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="sorting" href="https://visualgo.net/zh/sorting">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/sorting.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/sorting" id="sortingtext">
           排序
           <br/>
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/sorting/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=sorting">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           数组
          </span>
          <span class="filter">
           算法
          </span>
          <span class="filter">
           冒泡
           <br/>
          </span>
          <span class="filter">
           选择
           <br/>
          </span>
          <span class="filter">
           插入
           <br/>
          </span>
          <span class="filter">
           选择
          </span>
          <span class="filter">
           插入
          </span>
          <span class="filter">
           归并
           <br/>
          </span>
          <span class="filter">
           快速
           <br/>
          </span>
          <span class="filter">
           随机快速
           <br/>
          </span>
          <span class="filter">
           计数
           <br/>
          </span>
          <span class="filter">
           基
          </span>
          <span class="filter">
           排序
           <br/>
          </span>
          <span class="filter">
           cs1010
          </span>
          <span class="filter">
           it5003
          </span>
          <span class="filter">
           cs2040
          </span>
          <span class="filter">
           cs3230
          </span>
          <span class="filter">
           列表
           <br/>
          </span>
          <span class="filter">
           数据结构
          </span>
          <span class="filter">
           排序
           <br/>
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="bitmask">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="bitmask" href="https://visualgo.net/zh/bitmask">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/bitmask.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/bitmask" id="bitmasktext">
           位掩码
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/bitmask/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=bitmask">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           位操作
           <br/>
          </span>
          <span class="filter">
           设置
          </span>
          <span class="filter">
           cs3233
          </span>
          <span class="filter">
           数组
          </span>
          <span class="filter">
           列表
           <br/>
          </span>
          <span class="filter">
           动态规划
          </span>
          <span class="filter">
           数据结构
          </span>
          <span class="filter">
           位掩码
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="list">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="list" href="https://visualgo.net/zh/list">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/list.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/list" id="listtext">
           链表
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/list/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=list">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           都列
          </span>
          <span class="filter">
           队列
           <br/>
          </span>
          <span class="filter">
           双向
           <br/>
          </span>
          <span class="filter">
           双端队列
          </span>
          <span class="filter">
           it5003
          </span>
          <span class="filter">
           cs2040
          </span>
          <span class="filter">
           数组
          </span>
          <span class="filter">
           动态规划
          </span>
          <span class="filter">
           数据结构
          </span>
          <span class="filter">
           链接
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="heap">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="heap" href="https://visualgo.net/zh/heap">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/heap.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/heap" id="heaptext">
           二叉堆
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/heap/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=heap">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           优先队列
          </span>
          <span class="filter">
           递归
           <br/>
          </span>
          <span class="filter">
           it5003
          </span>
          <span class="filter">
           cs2040
          </span>
          <span class="filter">
           递归
          </span>
          <span class="filter">
           动态规划
          </span>
          <span class="filter">
           数据结构
          </span>
          <span class="filter">
           二进制
           <br/>
          </span>
          <span class="filter">
           堆
           <br/>
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="hashtable">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="hashtable" href="https://visualgo.net/zh/hashtable">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/hashtable.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/hashtable" id="hashtabletext">
           哈希表
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/hashtable/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=hashtable">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           开放地址
          </span>
          <span class="filter">
           线性的
          </span>
          <span class="filter">
           二次
           <br/>
          </span>
          <span class="filter">
           探测
           <br/>
          </span>
          <span class="filter">
           it5003
          </span>
          <span class="filter">
           cs2040
          </span>
          <span class="filter">
           动态规划
          </span>
          <span class="filter">
           数据结构
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="bst">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="bst" href="https://visualgo.net/zh/bst">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/bst.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/bst" id="bsttext">
           二叉搜索树
           <br/>
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/bst/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=bst">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           avl树
          </span>
          <span class="filter">
           设置
          </span>
          <span class="filter">
           表
          </span>
          <span class="filter">
           avl树
          </span>
          <span class="filter">
           it5003
          </span>
          <span class="filter">
           cs2040
          </span>
          <span class="filter">
           递归
          </span>
          <span class="filter">
           递归
           <br/>
          </span>
          <span class="filter">
           动态规划
          </span>
          <span class="filter">
           数据结构
          </span>
          <span class="filter">
           设置
          </span>
          <span class="filter">
           二叉排序树
          </span>
          <span class="filter">
           二进制
           <br/>
          </span>
          <span class="filter">
           找
          </span>
          <span class="filter">
           树
          </span>
          <span class="filter">
           优先
           <br/>
          </span>
          <span class="filter">
           队列
           <br/>
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="graphds">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="graphds" href="https://visualgo.net/zh/graphds">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/graphds.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/graphds" id="graphdstext">
           图结构
           <br/>
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/graphds/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=graphds">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           树
          </span>
          <span class="filter">
           完成
          </span>
          <span class="filter">
           二分图
           <br/>
          </span>
          <span class="filter">
           有向无环图
          </span>
          <span class="filter">
           it5003
          </span>
          <span class="filter">
           cs2040
          </span>
          <span class="filter">
           图
          </span>
          <span class="filter">
           动态规划
          </span>
          <span class="filter">
           数据结构
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="ufds">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="ufds" href="https://visualgo.net/zh/ufds">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/ufds.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/ufds" id="ufdstext">
           并查集
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/ufds/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=ufds">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           路径压缩
           <br/>
          </span>
          <span class="filter">
           不相交
           <br/>
          </span>
          <span class="filter">
           设置
          </span>
          <span class="filter">
           数据结构
          </span>
          <span class="filter">
           按秩合并
           <br/>
          </span>
          <span class="filter">
           cs2040
          </span>
          <span class="filter">
           cs3233
          </span>
          <span class="filter">
           数组
          </span>
          <span class="filter">
           树
          </span>
          <span class="filter">
           找
          </span>
          <span class="filter">
           动态规划
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="fenwicktree">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="fenwicktree" href="https://visualgo.net/zh/fenwicktree">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/fenwicktree.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/fenwicktree" id="fenwicktreetext">
           树状数组
           <br/>
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/fenwicktree/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=fenwicktree">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           二叉索树
          </span>
          <span class="filter">
           字节
          </span>
          <span class="filter">
           动态的
          </span>
          <span class="filter">
           芬威克
           <br/>
          </span>
          <span class="filter">
           范围，域
          </span>
          <span class="filter">
           求和
          </span>
          <span class="filter">
           点
          </span>
          <span class="filter">
           更新
          </span>
          <span class="filter">
           cs3233
          </span>
          <span class="filter">
           二进制
           <br/>
          </span>
          <span class="filter">
           动态规划
          </span>
          <span class="filter">
           数据结构
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="segmenttree">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="segmenttree" href="https://visualgo.net/zh/segmenttree">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/segmenttree.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/segmenttree" id="segmenttreetext">
           线段树
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/segmenttree/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=segmenttree">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           动态的
          </span>
          <span class="filter">
           范围，域
          </span>
          <span class="filter">
           求和
          </span>
          <span class="filter">
           最小
          </span>
          <span class="filter">
           最大
          </span>
          <span class="filter">
           cs3233
          </span>
          <span class="filter">
           段
           <br/>
          </span>
          <span class="filter">
           树
          </span>
          <span class="filter">
           动态规划
          </span>
          <span class="filter">
           数据结构
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="recursion">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="recursion" href="https://visualgo.net/zh/recursion">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/recursion.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/recursion" id="recursiontext">
           递归树/有向无环图&lt;...
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/recursion/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=recursion">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           动态规划
          </span>
          <span class="filter">
           动态规划
          </span>
          <span class="filter">
           范型
          </span>
          <span class="filter">
           cs1010
          </span>
          <span class="filter">
           it5003
          </span>
          <span class="filter">
           cs2040
          </span>
          <span class="filter">
           cs3233
          </span>
          <span class="filter">
           cs4234
          </span>
          <span class="filter">
           递归
           <br/>
          </span>
          <span class="filter">
           算法
          </span>
          <span class="filter">
           递归
          </span>
          <span class="filter">
           树
          </span>
          <span class="filter">
           有向无环图
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="dfsbfs">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="dfsbfs" href="https://visualgo.net/zh/dfsbfs">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/dfsbfs.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/dfsbfs" id="dfsbfstext">
           图遍历
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/dfsbfs/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=dfsbfs">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           广度优先搜索
           <br/>
          </span>
          <span class="filter">
           深度优先搜索
           <br/>
          </span>
          <span class="filter">
           it5003
          </span>
          <span class="filter">
           cs2040
          </span>
          <span class="filter">
           二分图
           <br/>
          </span>
          <span class="filter">
           强连通分量
          </span>
          <span class="filter">
           切割顶点
           <br/>
          </span>
          <span class="filter">
           节点
          </span>
          <span class="filter">
           立交桥
          </span>
          <span class="filter">
           cs2020
          </span>
          <span class="filter">
           图
          </span>
          <span class="filter">
           算法
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="mst">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="mst" href="https://visualgo.net/zh/mst">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/mst.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/mst" id="msttext">
           最小生成树
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/mst/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=mst">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           多生成树
          </span>
          <span class="filter">
           <font color="#333333" face="arial">
            <span style="white-space: normal;">
             prim算法
            </span>
           </font>
           <br/>
          </span>
          <span class="filter">
           (kruskal算法)
           <br/>
          </span>
          <span class="filter">
           图
          </span>
          <span class="filter">
           最小
          </span>
          <span class="filter">
           搅拌
          </span>
          <span class="filter">
           cs2040
          </span>
          <span class="filter">
           树
          </span>
          <span class="filter">
           算法
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="sssp">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="sssp" href="https://visualgo.net/zh/sssp">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/sssp.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/sssp" id="sssptext">
           单源最短路径
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/sssp/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=sssp">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           sssp
          </span>
          <span class="filter">
           单源
           <br/>
          </span>
          <span class="filter">
           广度优先搜索
           <br/>
          </span>
          <span class="filter">
           dijkstra
          </span>
          <span class="filter">
           bellman ford
          </span>
          <span class="filter">
           it5003
          </span>
          <span class="filter">
           cs2040
          </span>
          <span class="filter">
           单源
           <br/>
          </span>
          <span class="filter">
           最短路径
           <br/>
          </span>
          <span class="filter">
           图
          </span>
          <span class="filter">
           算法
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="cyclefinding">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="cyclefinding" href="https://visualgo.net/zh/cyclefinding">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/cyclefinding.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/cyclefinding" id="cyclefindingtext">
           循环查找
           <br/>
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/cyclefinding/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=cyclefinding">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           弗洛伊德
           <br/>
          </span>
          <span class="filter">
           龟兔赛跑
          </span>
          <span class="filter">
           数学
           <br/>
          </span>
          <span class="filter">
           cs3233
          </span>
          <span class="filter">
           算法
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="suffixtree">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="suffixtree" href="https://visualgo.net/zh/suffixtree">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/suffixtree.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/suffixtree" id="suffixtreetext">
           后缀树
           <br/>
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/suffixtree/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=suffixtree">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           字符串
           <br/>
          </span>
          <span class="filter">
           匹配
           <br/>
          </span>
          <span class="filter">
           似然比选择
          </span>
          <span class="filter">
           最长公共子序列
          </span>
          <span class="filter">
           cs3233
          </span>
          <span class="filter">
           后缀
           <br/>
          </span>
          <span class="filter">
           树
          </span>
          <span class="filter">
           动态规划
          </span>
          <span class="filter">
           数据结构
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="suffixarray">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="suffixarray" href="https://visualgo.net/zh/suffixarray">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/suffixarray.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/suffixarray" id="suffixarraytext">
           后缀数组
           <br/>
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/suffixarray/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=suffixarray">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           最长公共前缀
          </span>
          <span class="filter">
           cs3233
          </span>
          <span class="filter">
           匹配
           <br/>
          </span>
          <span class="filter">
           似然比选择
          </span>
          <span class="filter">
           最长公共子序列
          </span>
          <span class="filter">
           后缀
           <br/>
          </span>
          <span class="filter">
           数组
          </span>
          <span class="filter">
           字符串
           <br/>
          </span>
          <span class="filter">
           动态规划
          </span>
          <span class="filter">
           数据结构
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="polygon">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="polygon" href="https://visualgo.net/zh/polygon">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/polygon.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/polygon" id="polygontext">
           计算几何
           <br/>
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/polygon/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=polygon">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           转换
          </span>
          <span class="filter">
           切除
          </span>
          <span class="filter">
           弯曲
          </span>
          <span class="filter">
           凹
          </span>
          <span class="filter">
           cs3233
          </span>
          <span class="filter">
           计算
           <br/>
          </span>
          <span class="filter">
           几何
           <br/>
          </span>
          <span class="filter">
           算法
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="convexhull">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="convexhull" href="https://visualgo.net/zh/convexhull">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/convexhull.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/convexhull" id="convexhulltext">
           凸体船体
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/convexhull/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=convexhull">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           andrew算法
          </span>
          <span class="filter">
           单调链
           <br/>
          </span>
          <span class="filter">
           <p class="p1">
            <font size="2">
             葛立恒
            </font>
           </p>
          </span>
          <span class="filter">
           查阅
          </span>
          <span class="filter">
           jarvis步进算法
           <style type="text/css">
            <br>p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px &#39;helvetica neue&#39;; color: #2f2f2f; -webkit-text-stroke: #2f2f2f}<br>span.s1 {font-kerning: none}<br>
           </style>
          </span>
          <span class="filter">
           游行，遍历
          </span>
          <span class="filter">
           cs3233
          </span>
          <span class="filter">
           计算
           <br/>
          </span>
          <span class="filter">
           几何
           <br/>
          </span>
          <span class="filter">
           算法
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="maxflow">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="maxflow" href="https://visualgo.net/zh/maxflow">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/maxflow.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/maxflow" id="maxflowtext">
           网络流
           <br/>
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/maxflow/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=maxflow">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           最大流
           <br/>
          </span>
          <span class="filter">
           edmonds karp
          </span>
          <span class="filter">
           最小割
          </span>
          <span class="filter">
           dinic
          </span>
          <span class="filter">
           ford fulkerson
          </span>
          <span class="filter">
           图
          </span>
          <span class="filter">
           cs3233
          </span>
          <span class="filter">
           cs4234
          </span>
          <span class="filter">
           算法
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="matching">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="matching" href="https://visualgo.net/zh/matching">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/matching.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/matching" id="matchingtext">
           二分匹配
           <br/>
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/matching/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=matching">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           增强路径
          </span>
          <span class="filter">
           二分图
           <br/>
          </span>
          <span class="filter">
           图
          </span>
          <span class="filter">
           cs3233
          </span>
          <span class="filter">
           cs4234
          </span>
          <span class="filter">
           匹配
           <br/>
          </span>
          <span class="filter">
           算法
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="mvc">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="mvc" href="https://visualgo.net/zh/mvc">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/mvc.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/mvc" id="mvctext">
           最小顶点覆盖
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/mvc/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=mvc">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           np-hard
          </span>
          <span class="filter">
           图
          </span>
          <span class="filter">
           二分图
           <br/>
          </span>
          <span class="filter">
           树
          </span>
          <span class="filter">
           树
          </span>
          <span class="filter">
           动态规划
          </span>
          <span class="filter">
           二分图
           <br/>
          </span>
          <span class="filter">
           匹配
           <br/>
          </span>
          <span class="filter">
           最大流
           <br/>
          </span>
          <span class="filter">
           cs3233
          </span>
          <span class="filter">
           cs4234
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="steinertree">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="steinertree" href="https://visualgo.net/zh/steinertree">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/steinertree.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/steinertree" id="steinertreetext">
           Steiner Tree
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/steinertree/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=steinertree">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           np-hard
          </span>
          <span class="filter">
           图
          </span>
          <span class="filter">
           多生成树
          </span>
          <span class="filter">
           cs4234
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="tsp">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="tsp" href="https://visualgo.net/zh/tsp">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/tsp.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/tsp" id="tsptext">
           旅行商问题
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/tsp/print" target="_blank">
            ✍
           </a>
          </div>
          <a class="links" href="/training?diff=Medium&amp;n=7&amp;tl=0&amp;module=tsp">
           训练
          </a>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           np-hard
          </span>
          <span class="filter">
           图
          </span>
          <span class="filter">
           动态规划
          </span>
          <span class="filter">
           多生成树
          </span>
          <span class="filter">
           cs3233
          </span>
          <span class="filter">
           cs4234
          </span>
         </div>
        </div>
       </div>
      </li>
      <li class="viz" id="reductions">
       <div class="li-wrapper" style="background-color: lightblue;">
        <a class="thumbnail" data-anim="reductions" href="https://visualgo.net/zh/reductions">
         <img alt="please wait" src="https://visualgo.net/img/dummy.gif"/>
         <div class="static" style="background-image: url('/img/png/reductions.png');">
         </div>
         <div class="middle">
          <div class="message">
           Click to View
          </div>
         </div>
        </a>
        <div class="info">
         <h3>
          <a href="https://visualgo.net/zh/reductions" id="reductionstext">
           NP-complete Reduct...
          </a>
          <div class="electure-print links" title="Print the e-Lecture notes">
           <a href="/zh/reductions/print" target="_blank">
            ✍
           </a>
          </div>
         </h3>
         <div class="indv-viz-filters">
          <span class="filter">
           cs3230
          </span>
          <span class="filter">
           cs4234
          </span>
         </div>
        </div>
       </div>
      </li>
     </ul>
    </div>
    <div hidden="" id="reload-mobile-popup">
     <p>
      Reload screen or rotate device for a pathway suiting your device orientation
     </p>
     <a class="inner-button" id="reload-mobile-button">
      Reload
     </a>
     <a class="inner-button" id="cancel-reload-mobile-button">
      Cancel
     </a>
    </div>
   </div>
   <div id="bottom-bar">
    <a id="scale" style="display: none;">
     1.0x
    </a>
    <a id="trigger-about">
     关于
    </a>
    <a id="trigger-team">
     团队
    </a>
    <a id="trigger-terms">
     使用条款
     <br/>
    </a>
    <a id="trigger-privacy">
     隐私政策
    </a>
   </div>
   <div class="overlays" id="about">
    <h4>
     关于
    </h4>
    <span class="close-overlay">
     ✕
    </span>
    <div class="content">
     <p>
      VisuAlgo最初由副教授Steven Halim于2011年构思，旨在通过提供自学、互动式学习平台，帮助学生更深入地理解数据结构和算法。
     </p>
     <p>
      VisuAlgo涵盖了Steven Halim博士与Felix Halim博士、Suhendry Effendy博士合著的书《竞技编程》中讨论的许多高级算法。即使过去十年，VisuAlgo仍然是可视化和动画化这些复杂算法的独家平台。
     </p>
     <p>
      虽然VisuAlgo主要面向新加坡国立大学（NUS）的学生，包括各种数据结构和算法课程（例如CS1010/等价课程，CS2040/等价课程（包括IT5003），CS3230，CS3233和CS4234），但它也是全球好奇心的宝贵资源，促进在线学习。
     </p>
     <p>
      最初，VisuAlgo并不适用于智能手机等小触摸屏，因为复杂的算法可视化需要大量的像素空间和点击拖动交互。为了获得最佳用户体验，建议使用最低分辨率为1366x768的屏幕。然而，自2022年4月以来，VisuAlgo的移动（精简）版本已经推出，使得在智能手机屏幕上使用VisuAlgo的部分功能成为可能。
     </p>
     <p>
      VisuAlgo仍然在不断发展中，正在开发更复杂的可视化。目前，该平台拥有24个可视化模块。
     </p>
     <p>
      VisuAlgo配备了内置的问题生成器和答案验证器，其“在线测验系统”使学生能够测试他们对基本数据结构和算法的理解。问题根据特定规则随机生成，并且学生提交答案后会自动得到评分。随着越来越多的计算机科学教师在全球范围内采用这种在线测验系统，它可以有效地消除许多大学标准计算机科学考试中手工基本数据结构和算法问题。通过给通过在线测验的学生分配一个小但非零的权重，计算机科学教师可以显著提高学生对这些基本概念的掌握程度，因为他们可以在参加在线测验之前立即验证几乎无限数量的练习题。每个VisuAlgo可视化模块现在都包含自己的在线测验组件。
     </p>
     <p>
      VisuAlgo已经被翻译成三种主要语言：英语、中文和印尼语。此外，我们还用各种语言撰写了关于VisuAlgo的公开笔记，包括印尼语、韩语、越南语和泰语：
     </p>
     <a href="https://www.facebook.com/notes/steven-halim/httpidvisualgonet-visualisasi-struktur-data-dan-algoritma-dengan-animasi/10153236934439689" target="_blank">
      <u>
       id
      </u>
     </a>
     ,
     <a href="http://blog.naver.com/visualgo_nus" target="_blank">
      <u>
       kr
      </u>
     </a>
     ,
     <a href="https://www.facebook.com/groups/163215593699283/permalink/824003417620494/" target="_blank">
      <u>
       vn
      </u>
     </a>
     ,
     <a href="http://pantip.com/topic/32736343" target="_blank">
      <u>
       th
      </u>
     </a>
     .
    </div>
   </div>
   <div class="overlays" id="team">
    <h4>
     团队
    </h4>
    <span class="close-overlay">
     ✕
    </span>
    <div class="content">
     <p>
      <strong>
       <span style="line-height: 150%;">
        项目领导和顾问（2011年7月至今）
       </span>
      </strong>
      <br/>
      <a href="https://www.comp.nus.edu.sg/~stevenha/" target="_blank">
       Associate Professor Steven Halim
      </a>
      , School of Computing (SoC), National University of Singapore (NUS)
      <br/>
      <a href="https://www.linkedin.com/in/felixhalim/" target="_blank">
       Dr Felix Halim
      </a>
      , Senior Software Engineer, Google (Mountain View)
     </p>
     <p>
      <strong>
       <span style="line-height: 150%;">
        本科生研究人员 1
       </span>
      </strong>
      <br/>
      <b>
       CDTL TEG 1: Jul 2011-Apr 2012
      </b>
      : Koh Zi Chun, Victor Loh Bo Huai
     </p>
     <p>
      <strong>
       <span style="line-height: 150%;">
        最后一年项目/ UROP学生 1
       </span>
      </strong>
      <br/>
      <b>
       Jul 2012-Dec 2013
      </b>
      : Phan Thi Quynh Trang, Peter Phandi, Albert Millardo Tjindradinata, Nguyen Hoang Duy
      <br/>
      <b>
       Jun 2013-Apr 2014
      </b>
      <a href="https://www.rosemarietan.com/" target="_blank">
       Rose Marie Tan Zhao Yun
      </a>
      , Ivan Reinaldo
     </p>
     <p>
      <strong>
       <span style="line-height: 150%;">
        本科生研究人员 2
       </span>
      </strong>
      <br/>
      <b>
       CDTL TEG 2: May 2014-Jul 2014
      </b>
      : Jonathan Irvin Gunawan, Nathan Azaria, Ian Leow Tze Wei, Nguyen Viet Dung, Nguyen Khac Tung, Steven Kester Yuwono, Cao Shengze, Mohan Jishnu
     </p>
     <p>
      <strong>
       <span style="line-height: 150%;">
        最后一年项目/ UROP学生 2
       </span>
      </strong>
      <br/>
      <b>
       Jun 2014-Apr 2015
      </b>
      : Erin Teo Yi Ling, Wang Zi
      <br/>
      <b>
       Jun 2016-Dec 2017
      </b>
      : Truong Ngoc Khanh, John Kevin Tjahjadi, Gabriella Michelle, Muhammad Rais Fathin Mudzakir
      <br/>
      <b>
       Aug 2021-Apr 2023
      </b>
      : Liu Guangyuan, Manas Vegi, Sha Long, Vuong Hoang Long, Ting Xiao, Lim Dewen Aloysius
      <br/>
     </p>
     <p>
      <strong>
       <span style="line-height: 150%;">
        本科生研究人员 3
       </span>
      </strong>
      <br/>
      <b>
       Optiver: Aug 2023-Oct 2023
      </b>
      : Bui Hong Duc, Oleh Naver, Tay Ngan Lin
      <br/>
     </p>
     <p>
      <strong>
       <span style="line-height: 150%;">
        最后一年项目/ UROP学生 3
       </span>
      </strong>
      <br/>
      <b>
       Aug 2023-Apr 2024
      </b>
      : Xiong Jingya, Radian Krisno, Ng Wee Han
      <br/>
     </p>
     <p>
      List of translators who have contributed ≥ 100 translations can be found at
      <a href="https://visualgo.net/statistics">
       statistics
      </a>
      page.
     </p>
     <p>
      <strong>
       <span style="line-height: 150%;">
        致谢
       </span>
      </strong>
      <br/>
      NUS教学与学习发展中心（CDTL）授予拨款以启动这个项目。在2023/24学年，Optiver的慷慨捐赠将被用来进一步开发 VisuAlgo。
     </p>
    </div>
   </div>
   <div class="overlays" id="termsofuse">
    <h4>
     使用条款
     <br/>
    </h4>
    <span class="close-overlay">
     ✕
    </span>
    <div class="content">
     <p>
      VisuAlgo慷慨地向全球计算机科学界提供免费服务。如果您喜欢VisuAlgo，我们恳请您
      <b>
       向其他计算机科学学生和教师宣传它的存在
      </b>
      。您可以通过社交媒体平台（如Facebook、YouTube、Instagram、TikTok、Twitter等）、课程网页、博客评论、电子邮件等方式分享VisuAlgo。
     </p>
     <p>
      数据结构与算法（DSA）的学生和教师可以直接在课堂上使用本网站。如果您从本网站截取屏幕截图或视频，可以在其他地方使用，但请引用本网站的URL（
      <a href="https://visualgo.net">
       https://visualgo.net
      </a>
      ）和/或下面的出版物列表作为参考。但请不要下载VisuAlgo的客户端文件并将其托管在您的网站上，因为这构成了抄袭行为。目前，我们不允许他人分叉此项目或创建VisuAlgo的变体。个人使用离线副本的客户端VisuAlgo是可以接受的。
     </p>
     <p>
      请注意，VisuAlgo的在线测验组件具有重要的服务器端元素，保存服务器端脚本和数据库并不容易。目前，普通公众只能通过“培训模式”访问在线测验系统。“测试模式”提供了一个更受控制的环境，用于在新加坡国立大学的真实考试中使用随机生成的问题和自动验证。
     </p>
     <p>
      <br/>
     </p>
     <p>
      <strong>
       <span style="line-height: 200%;">
        出版物列表
       </span>
      </strong>
     </p>
     <p>
      这项工作曾在2012年国际大学生程序设计竞赛（波兰，华沙）的CLI研讨会上和2012年国际信息学奥林匹克竞赛（意大利，锡尔米奥内-蒙蒂基亚里）的IOI会议上展示过。您可以点击
      <a href="https://ioinformatics.org/journal/INFOL099.pdf" target="_blank">
       此链接
      </a>
      阅读我们2012年关于该系统的论文（当时还没有称为VisuAlgo），以及
      <a href="https://ioinformatics.org/journal/v9_2015_243_245.pdf" target="_blank">
       此链接
      </a>
      阅读2015年的简短更新（将VisuAlgo与之前的项目关联起来）。
     </p>
     <p>
      <br/>
     </p>
     <p>
      <strong>
       <span style="line-height: 200%;">
        错误报告或新功能请求
       </span>
      </strong>
     </p>
     <p>
      VisuAlgo并不是一个完成的项目。Steven Halim副教授仍在积极改进VisuAlgo。如果您在使用VisuAlgo时发现任何可视化页面/在线测验工具中的错误，或者您想要请求新功能，请联系Steven Halim副教授。他的联系方式是将他的名字连接起来，然后加上gmail dot com。
     </p>
    </div>
   </div>
   <div class="overlays" id="privacy-policy">
    <h4>
     隐私政策
    </h4>
    <span class="close-overlay">
     ✕
    </span>
    <div class="content">
     <p>
      <b>
       版本 1.2 (更新于2023年8月18日星期五)。
      </b>
     </p>
     <p>
      自2023年8月18日（星期五）起，我们不再使用 Google Analytics。因此，我们现在使用的所有 cookies 仅用于此网站的运营。即使是首次访问的用户，烦人的 cookie 同意弹窗现在也已关闭。
     </p>
     <p>
      自2023年6月7日（星期五）起，由于 Optiver 的慷慨捐赠，全世界的任何人都可以自行创建一个 VisuAlgo 账户，以存储一些自定义设置（例如，布局模式，默认语言，播放速度等）。
     </p>
     <p>
      此外，对于 NUS 学生，通过使用 VisuAlgo 账户（一个 NUS 官方电子邮件地址，课堂名册中的学生姓名，以及在服务器端加密的密码 - 不存储其他个人数据），您同意您的课程讲师跟踪您的电子讲义阅读和在线测验培训进度，这是顺利进行课程所必需的。您的 VisuAlgo 账户也将用于参加 NUS 官方的 VisuAlgo 在线测验，因此，将您的账户凭据传递给他人代您进行在线测验构成学术违规。课程结束后，您的用户账户将被清除，除非您选择保留您的账户（OPT-IN）。访问完整的 VisuAlgo 数据库（包含加密密码）的权限仅限于 Halim 教授本人。
     </p>
     <p>
      对于全球其他已经给 Steven 写过信的 CS 讲师，需要一个 VisuAlgo 账户（您的（非 NUS）电子邮件地址，您可以使用任何显示名称，以及加密密码）来区分您的在线凭据与世界其他地方。您的账户将具有 CS 讲师特定的功能，即能够查看隐藏的幻灯片，这些幻灯片包含了在隐藏幻灯片之前的幻灯片中提出的问题的（有趣的）答案。您还可以访问 VisuAlgo 在线测验的 Hard 设置。您可以自由地使用这些材料来增强您的数据结构和算法课程。请注意，未来可能会有其他 CS 讲师特定的功能。
      <br/>
     </p>
     <p>
      对于任何拥有 VisuAlgo 账户的人，如果您希望不再与 VisuAlgo 工具有关联，您可以自行删除您的账户。
     </p>
    </div>
   </div>
  </div>
  <script crossorigin="anonymous" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" src="https://code.jquery.com/jquery-3.7.0.min.js">
  </script>
  <script crossorigin="anonymous" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
  </script>
  <script src="https://unpkg.com/d3-force-boundary@0.0.1/dist/d3-force-boundary.min.js">
  </script>
  <script>
   $(function () {
    // overlays stuffs
    $('#trigger-about').click(function() {
      if ($(window).width() > 600) {
        $('#dark-overlay').fadeIn(function() {
          $('#about').fadeIn();
        });
      }
      else
        alert('Sorry, this dialog is too big. Please load it on bigger screen');
    });

    $('#trigger-team').click(function() {
      if ($(window).width() > 600) {
        $('#dark-overlay').fadeIn(function() {
          $('#team').fadeIn();
        });
      }
      else
        alert('Sorry, this dialog is too big. Please load it on bigger screen');
    });

    $('#trigger-terms').click(function() {
      if ($(window).width() > 600) {
        $('#dark-overlay').fadeIn(function() {
          $('#termsofuse').fadeIn();
        });
      }
      else
        alert('Sorry, this dialog is too big. Please load it on bigger screen');
    });

    $('#trigger-privacy').click(function () {
      if ($(window).width() > 600) {
        $('#dark-overlay').fadeIn(function() {
          $('#privacy-policy').fadeIn();
        });
      }
      else
        alert('Sorry, this dialog is too big. Please load it on bigger screen');
    })

    $('.close-overlay').click(function() {
      $('.overlays').fadeOut(function() {
        $('#dark-overlay').fadeOut();
      });
    });

    $('#dark-overlay').click(function() {
      $('.overlays').fadeOut();
      $('#dark-overlay').fadeOut();
      if (typeof GeometryWidget !== 'undefined') {
        GeometryWidget.stopLoop();
      }
    });
  })
  </script>
  <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-1566631-4">
  </script>
  <script>
   $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': "4sWzwdlSsYSnOFXr1z9X1S5VqUh3C6SshQOybgd7"
        }
      });

      // handles account dropdown menu
      $(function () {
        $('#language-dropdown-btn').click(function (e) {
          $('#language-dropdown-menu').css('display', 'block');
          $('#account-dropdown-menu').css('display', 'none')
          e.stopPropagation()
        })
        $(document).click(function () {
          $('#language-dropdown-menu').css('display', 'none')
        })
      })

      $(function () {
        $('#account-dropdown-btn').click(function (e) {
          $('#account-dropdown-menu').css('display', 'block')
          $('#language-dropdown-menu').css('display', 'none')
          e.stopPropagation()
        })
        $(document).click(function (e) {
          $('#account-dropdown-menu').css('display', 'none')
        })
      })

      // surprise colour!
      // Referenced to in  home.js and viz.js also
      var colourArray = ["#52bc69", "#d65775"/*"#ed5a7d"*/, "#2ebbd1", "#d9513c", "#fec515", "#4b65ba", "#ff8a27", "#a7d41e"]; // green, pink, blue, red, yellow, indigo, orange, lime

      function disableScroll() { $('html').css('overflow', 'hidden'); }

      function enableScroll() { $('html').css('overflow', 'visible'); }

      function replaceAll(find, replace, str) { return str.replace(new RegExp(find, 'g'), replace); }

      function getColours() {
        var generatedColours = new Array();
        while (generatedColours.length < 4) {
          var n = (Math.floor(Math.random() * colourArray.length));
          if ($.inArray(n, generatedColours) == -1)
            generatedColours.push(n);
        }
        return generatedColours;
      }

      function isOn(value, position) {
        return (value>>position) & 1 === 1;
      }

      function customAlert(msg) {
        $('#custom-alert p').html(msg);
        var m = -1 * ($('#custom-alert').outerHeight()/2);
        $('#custom-alert').css('margin-top', m+'px');
        $('#dark-overlay').fadeIn(function() {
          $('#custom-alert').fadeIn(function() {
            setTimeout(function() {
              $('#custom-alert').fadeOut(function() {
                $('#dark-overlay').fadeOut();
              });
            }, 1000);
          });
        });
      }

      function showLoadingScreen() {
        $('#loading-overlay').show();
        $('#loading-message').show();
      }

      function hideLoadingScreen() {
        $('#loading-overlay').hide();
      }

      function commonAction(retval, msg) {
        if (retval) {
          $('#current-action').show();
          $('#current-action').html(mode == "exploration" ? msg : ("e-Lecture Example (auto play until done)<br>" + msg));
          $('#progress-bar').slider("option", "max", gw.getTotalIteration()-1);
          triggerRightPanels();
          isPlaying = true;
        }
      }

      function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split('&');
        for (var i = 0; i < vars.length; ++i) {
          var pair = vars[i].split('=');
          if (decodeURIComponent(pair[0]) == variable)
            return decodeURIComponent(pair[1]);
        }
        return "";
      }

      const MOBILE_WIDTH = 1000;
      const matchMediaMobile = window.matchMedia(`only screen and (max-width: ${MOBILE_WIDTH}px)`);
      const matchMediaNarrow = window.matchMedia(`only screen and (max-width: 500px)`);
      function isMobile() {
        return matchMediaMobile.matches;
      }
      //To fix the issue of a narrow desktop window being asked to rotate, I am now checking for it based on the navigator.userAgent to see if its mobile or not.
      //This may change in the future if browsers decide to change the naming of userAgent for mobile browsers so may need to keep an eye on this.
      function isMobileOS() {
        return /Mobi/i.test(navigator.userAgent) && !/ipad/i.test(navigator.userAgent);
      }
      let portraitMatcher = window.matchMedia("(orientation:portrait)");
      function isPortrait() {
        return portraitMatcher.matches;
      }

      var generatedColours = getColours();
      var surpriseColour = colourArray[generatedColours[0]];
      var colourTheSecond = colourArray[generatedColours[1]];
      var colourTheThird = colourArray[generatedColours[2]];
      var colourTheFourth = colourArray[generatedColours[3]];

      $(function() {
        $('.links').css('background', surpriseColour);
        $('.colour').css("color", surpriseColour);
        $('h4').css("background-color", surpriseColour); // about, contact us etc. button background

        // title
        $('#title a').click(function() {
          $('#title a').removeClass('selected-viz');
          $(this).addClass('selected-viz');
        });
      });

/*
      // GA dropped 26 Jun 2023 and then made official on 18 Aug 2023
/*
      // the sunset-ed GA, commented on 26 Jun 2023, and Prof Halim doesn't bother to use anymore
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
*/

      // function setCookie(cname, cvalue, exdays) {
      //   const d = new Date();
      //   d.setTime(d.getTime() + (exdays*24*60*60*1000));
      //   let expires = "expires="+ d.toUTCString();
      //   document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
      // }

//       //         $(function() {
//           $('#gdpr-accept').click(function () {
// /*
//             // added on 26 Jun 2023
//             window.dataLayer = window.dataLayer || [];
//             function gtag(){dataLayer.push(arguments);}
//             gtag('js', new Date());

//             gtag('config', 'UA-1566631-4');
// */
// //            ga('create', 'UA-1566631-4', 'auto');
// //            ga('send', 'pageview');
//             setCookie('use_google_analytics', 'true', 365)
//             $('#gdpr-popup').hide()
//           });
//           $('#gdpr-reject').click(function () {
//             setCookie('use_google_analytics', 'false', 365)
//             $('#gdpr-popup').hide()
//           });
//         });
//       
      $('#gdpr-privacy-policy').click(function () {
        if ($(window).width() > 600) {
          $('#dark-overlay').fadeIn(function() {
            $('#privacy-policy').fadeIn();
          });
        }
        else
          alert('Sorry, this dialog is too big. Please load it on bigger screen');
      })
  </script>
  <script crossorigin="anonymous" integrity="sha512-NMhzM2RHzbCRO0s5VPaRC+2bW6nmNXimzC9p5sp2x19M+zzuSJ2T50dEQ7hpHkNjnX1mt8nQg1NNthwRZgsoIg==" referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js">
  </script>
  <script src="https://unpkg.com/d3-force-boundary@0.0.1/dist/d3-force-boundary.min.js">
  </script>
  <script>
   document.getElementById('modeselect').addEventListener('change', function() {
  document.getElementById('temp_view_form').submit();
});

var seen = 0; // all have not been seen
var timer;

function nextTip() { // note to self: now I think I can increase the number of tips...
  if (seen == (1<<12)-1) seen = 0;

  var cur;
  do {
    cur = Math.floor(Math.random()*12);
  }
  while ((seen & (1<<cur)) != 0);

  seen |= (1<<cur);
  $("#msg").html($("#msg_list"+cur).html()).fadeIn();
  clearTimeout(timer); // reset timer
  timer = setTimeout(function() {
    $("#msg").fadeOut(200, nextTip); // auto-rotate tip per 15s (current total before cycle 2m30s, 11 tips so far)
  }, 15000);
}

$(function() {
  function showhide() {
    if ($(window).width() < 700) {
      $("#subtitle").html("这个工具在大屏幕上看起来更好:)");
      $("#topright").hide();
    }
    else {
      $("#subtitle").html("通过动画可视化数据结构和算法<br>");
      $("#topright").css("left", $(window).width()-190); // always on the right
      $("#topright").show();
    }
  }

  $(window).resize(function() {
    showhide();
  });
  showhide();

  $(function() {
    $(this).children('img').attr('width', $(this).children('div.static').css('width'));
    $(this).children('img').attr('height', $(this).children('div.static').css('height'));
  });

  $("#msg").html($("#msg_list1").html()).fadeIn(); // to avoid blank case (not sure about racing condition)
  //nextTip();
  setTimeout(function() {
    $("#msg").fadeOut(200, nextTip);
  }, 200); // load first msg 200ms after page load

  // thumbnail image animation on hover
  $('a.thumbnail').hover(function() {
    $(this).children('img').attr('src', window.location.origin + '/img/gif/' + $(this).attr('data-anim') + '.gif');
    $(this).children('div.static').hide();
  }, function() {
    $(this).children('div.static').show();
  });

  $('a.thumbnail').hover(function() {
    $(this).children('image').attr('href', 'img/gif/' + $(this).attr('data-anim') + '.gif');
    $(this).children('image').attr('width', $(this).children('g.static').children('image').css('width')); 
    $(this).children('image').attr('height', $(this).children('g.static').children('image').css('height'));
    $(this).children('g.static').hide();
  }, function() {
    $(this).children('g.static').show();
  });

  $('a.thumbnail').hover(function () {
    $(this).children('text').show()
  }, function () {
    $(this).children('text').fadeOut('fast')
  })

  // tags
  var allViz = new Array(
    new Array(
    'array',
    'array',
    'cs1010',
    'it5003',
    'cs2040',
    'cs3230',
    'cs3233'
    ),
    new Array(
    'sorting',
    '排序<br>',
    '数组',
    '算法',
    '冒泡<br>',
    '选择<br>',
    '插入<br>',
    '选择',
    '插入',
    '归并<br>',
    '快速<br>',
    '随机快速<br>',
    '计数<br>',
    '基',
    '排序<br>',
    'cs1010',
    'it5003',
    'cs2040',
    'cs3230',
    '列表<br>',
    '数据结构',
    '排序<br>'
    ),
    new Array(
    'bitmask',
    '位掩码',
    '位操作<br>',
    '设置',
    'cs3233',
    '数组',
    '列表<br>',
    '动态规划',
    '数据结构',
    '位掩码'
    ),
    new Array(
    'list',
    '链表',
    '都列',
    '队列<br>',
    '双向<br>',
    '双端队列',
    'it5003',
    'cs2040',
    '数组',
    '动态规划',
    '数据结构',
    '链接'
    ),
    new Array(
    'heap',
    '二叉堆',
    '优先队列',
    '递归<br>',
    'it5003',
    'cs2040',
    '递归',
    '动态规划',
    '数据结构',
    '二进制<br>',
    '堆<br>'
    ),
    new Array(
    'hashtable',
    '哈希表',
    '开放地址',
    '线性的',
    '二次<br>',
    '探测<br>',
    'it5003',
    'cs2040',
    '动态规划',
    '数据结构'
    ),
    new Array(
    'bst',
    '二叉搜索树<br>',
    'avl树',
    '设置',
    '表',
    'avl树',
    'it5003',
    'cs2040',
    '递归',
    '递归<br>',
    '动态规划',
    '数据结构',
    '设置',
    '二叉排序树',
    '二进制<br>',
    '找',
    '树',
    '优先<br>',
    '队列<br>'
    ),
    new Array(
    'graphds',
    '图结构<br>',
    '树',
    '完成',
    '二分图<br>',
    '有向无环图',
    'it5003',
    'cs2040',
    '图',
    '动态规划',
    '数据结构'
    ),
    new Array(
    'ufds',
    '并查集',
    '路径压缩<br>',
    '不相交<br>',
    '设置',
    '数据结构',
    '按秩合并<br>',
    'cs2040',
    'cs3233',
    '数组',
    '树',
    '找',
    '动态规划'
    ),
    new Array(
    'fenwicktree',
    '树状数组<br>',
    '二叉索树',
    '字节',
    '动态的',
    '芬威克<br>',
    '范围，域',
    '求和',
    '点',
    '更新',
    'cs3233',
    '二进制<br>',
    '动态规划',
    '数据结构'
    ),
    new Array(
    'segmenttree',
    '线段树',
    '动态的',
    '范围，域',
    '求和',
    '最小',
    '最大',
    'cs3233',
    '段<br>',
    '树',
    '动态规划',
    '数据结构'
    ),
    new Array(
    'recursion',
    '递归树/有向无环图<br>',
    '动态规划',
    '动态规划',
    '范型',
    'cs1010',
    'it5003',
    'cs2040',
    'cs3233',
    'cs4234',
    '递归<br>',
    '算法',
    '递归',
    '树',
    '有向无环图'
    ),
    new Array(
    'dfsbfs',
    '图遍历',
    '广度优先搜索<br>',
    '深度优先搜索<br>',
    'it5003',
    'cs2040',
    '二分图<br>',
    '强连通分量',
    '切割顶点<br>',
    '节点',
    '立交桥',
    'cs2020',
    '图',
    '算法'
    ),
    new Array(
    'mst',
    '最小生成树',
    '多生成树',
    '<font color="#333333" face="arial"><span style="white-space: normal;">prim算法</span></font><br>',
    '(kruskal算法)<br>',
    '图',
    '最小',
    '搅拌',
    'cs2040',
    '树',
    '算法'
    ),
    new Array(
    'sssp',
    '单源最短路径',
    'sssp',
    '单源<br>',
    '广度优先搜索<br>',
    'dijkstra',
    'bellman ford',
    'it5003',
    'cs2040',
    '单源<br>',
    '最短路径<br>',
    '图',
    '算法'
    ),
    new Array(
    'cyclefinding',
    '循环查找<br>',
    '弗洛伊德<br>',
    '龟兔赛跑',
    '数学<br>',
    'cs3233',
    '算法'
    ),
    new Array(
    'suffixtree',
    '后缀树<br>',
    '字符串<br>',
    '匹配<br>',
    '似然比选择',
    '最长公共子序列',
    'cs3233',
    '后缀<br>',
    '树',
    '动态规划',
    '数据结构'
    ),
    new Array(
    'suffixarray',
    '后缀数组<br>',
    '最长公共前缀',
    'cs3233',
    '匹配<br>',
    '似然比选择',
    '最长公共子序列',
    '后缀<br>',
    '数组',
    '字符串<br>',
    '动态规划',
    '数据结构'
    ),
    new Array(
    'polygon',
    '计算几何<br>',
    '转换',
    '切除',
    '弯曲',
    '凹',
    'cs3233',
    '计算<br>',
    '几何<br>',
    '算法'
    ),
    new Array(
    'convexhull',
    '凸体船体',
    'andrew算法',
    '单调链<br>',
    '<p class="p1"><font size="2">葛立恒</font></p>',
    '查阅',
    'jarvis步进算法<style type="text/css"><br>p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px &#39;helvetica neue&#39;; color: #2f2f2f; -webkit-text-stroke: #2f2f2f}<br>span.s1 {font-kerning: none}<br></style>',
    '游行，遍历',
    'cs3233',
    '计算<br>',
    '几何<br>',
    '算法'
    ),
    new Array(
    'maxflow',
    '网络流<br>',
    '最大流<br>',
    'edmonds karp',
    '最小割',
    'dinic',
    'ford fulkerson',
    '图',
    'cs3233',
    'cs4234',
    '算法'
    ),
    new Array(
    'matching',
    '二分匹配<br>',
    '增强路径',
    '二分图<br>',
    '图',
    'cs3233',
    'cs4234',
    '匹配<br>',
    '算法'
    ),
    new Array(
    'mvc',
    '最小顶点覆盖',
    'np-hard',
    '图',
    '二分图<br>',
    '树',
    '树',
    '动态规划',
    '二分图<br>',
    '匹配<br>',
    '最大流<br>',
    'cs3233',
    'cs4234'
    ),
    new Array(
    'steinertree',
    'steiner tree',
    'np-hard',
    '图',
    '多生成树',
    'cs4234'
    ),
    new Array(
    'tsp',
    '旅行商问题',
    'np-hard',
    '图',
    '动态规划',
    '多生成树',
    'cs3233',
    'cs4234'
    ),
    new Array(
    'reductions',
    'np-complete reductions',
    'cs3230',
    'cs4234'
    )
  );

  // generate tags
  function createFilters() {
    var filterList = new Array();
    for (var i = 0; i < allViz.length; ++i) {
      var thisVizTags = allViz[i];
      for (var j = 1; j < thisVizTags.length; ++j)
        if ($.inArray(thisVizTags[j], filterList) == -1)
          filterList.push(thisVizTags[j]);
    }
    filterList.sort();
    for (var i = 0; i < filterList.length; ++i)
      // if (i>0 && filterList[i]!=filterList[i-1]) // avoid duplicates
      $('#filters').append("<span class='filter'>" + filterList[i] + "</span>");
  }
  createFilters();

  // tag and search mechanism
  $('#filters-and-lines').hide();
  $('#emptySearchMsg').hide();
  var isEmptySearch = true;
  var searchTerm = new Array(""); // index 0 is the value from the search bar. Indices 1+ are values from tags.

  // search/unsearch from tag filters
  $('.filter').click(function() {
    // add value to search
    searchTerm[searchTerm.length] = $(this).html();
    showResults();
    $('#active-tags').append('<div class="active-tag">' + $(this).html() + '<span>&#x2715;</span></div>');
    $('.active-tag span').unbind('click').bind('click', function() {
      // remove value from search
      var indexToRemove = searchTerm.indexOf($(this).parent().text());
      searchTerm.splice(indexToRemove, 1);
      showResults();
      $(this).parent().remove(); // visual
    });
  });

  // instant search from search bar
  $('#search').each(function() {
    // Save current value of element
    $(this).data('oldVal', $(this));

    // Look for changes in the value
    $(this).bind("propertychange keyup input paste", function(event) {
      // If value has changed...
      if ($(this).data('oldVal') != $(this).val()) {
        // Updated stored value
        $(this).data('oldVal', $(this).val());
        searchTerm[0] = $(this).val();
        showResults();
      }
    });
  });

  $('#searchbar').submit(function() {
    return false;
  });

  // find vizs with tag searchTerm
  function showResults() {
    isEmptySearch = true;
    $('#emptySearchMsg').hide();
    $('.viz').hide();
    for (var i = 0; i < allViz.length; ++i) { // for each visualisation
      var thisVizTags = allViz[i]; // array of the tags this visualisation has
      var foundAll = true;
      for (var j = 0; j < searchTerm.length; ++j) // for each search term
        foundAll = foundAll && findOneTag(searchTerm[j], thisVizTags);
        if (foundAll) {
          $('#'+thisVizTags[0]).show();
          isEmptySearch = false;
        }
    }
    if (isEmptySearch)
      $('#emptySearchMsg').show();
  }

  function findOneTag(tag, vizArr) {
    var found = false;
    for (var i = 0; i < vizArr.length; ++i) {
      var patt = new RegExp(tag, "i");
      if (patt.test(vizArr[i]))
        found = true;
    }
    return found;
  }

  // styling - arrow rotation, show filters-and-lines
  $("#show-filters").click(function() {
    if ($("#filters-and-lines").is(":hidden"))
      showFilters();
    else
      hideFilters();
  });
  function showFilters() {
    $("#filters-and-lines").slideDown("slow");
    $("#show-filters").html('&#9653;'); // ^
  }
  function hideFilters() {
    $("#filters-and-lines").slideUp("slow");
    $("#show-filters").html('&#9663;'); // v
  }

  // styling - surprise colour stuff
  $('#search').focus(function() { // search inset box-shadow
    $(this).css("box-shadow", "0px 0px 3px " + surpriseColour + " inset");
    $(this).css("color", "black");
  });
  $('#search').focusout(function() {
    if ($(this).val().trim() == "") {
      $(this).css("box-shadow", "0px 0px 3px #929292 inset");
      $(this).css("color", "#888888");
    }
  });
  $('#show-filters').css("background-color", surpriseColour); // search filter button background
  $('#temp a').css("background-color", surpriseColour); // link to old site button
  $('.filter').css("background-color", "#aaaaaa"); // filter tags on hover
  $('.filter').hover(function() {
    $(this).css("background-color", surpriseColour);
  }, function() {
    $(this).css("background-color", "#aaaaaa");
  });
  $(document).ready(function () {
    setTimeout(function () {
      $('#change-lang-popup').fadeOut('slow')
    }, 5000)

    setTimeout(function () {
      $('#message-popup').fadeOut('slow')
    }, 5000)
  })
  $(document).ready(function () {
    const platform = navigator?.userAgentData?.platform || navigator?.platform || 'unknown';
    window.addEventListener('keydown', function (e) {
      if (platform === 'macOS') {
        if (e.key === 'f' && e.metaKey) {
          e.preventDefault()
          $('#search').focus()
        }
      } else {
        if (e.key === 'f' && e.ctrlKey) {
          e.preventDefault()
          $('#search').focus()
        }
      }
    })
  })
  $('#dismiss-message-btn').click(function () {
    $('#message-popup').fadeOut('fast')
    setCookie('dont_want_popup', 1, 1)
  })
});
  </script>
 </body>
</html>

